import React, { useState } from 'react';
import { 
  Book, 
  CheckCircle, 
  Clock, 
  Code, 
  FileText, 
  GitBranch, 
  Layers, 
  Target, 
  Users, 
  Zap,
  ArrowRight,
  Star,
  Lightbulb,
  Settings,
  Folder,
  Terminal,
  Eye,
  Sparkles,
  Download,
  Copy,
  Check,
  Activity,
  Database
} from 'lucide-react';
import DesignTemplate from './DesignTemplate.jsx';

const ProductDesignTutorial = ({ onBack }) => {
  const [activeSection, setActiveSection] = useState('overview');
  const [copiedStates, setCopiedStates] = useState({});

  const copyToClipboard = (text, key) => {
    navigator.clipboard.writeText(text);
    setCopiedStates(prev => ({ ...prev, [key]: true }));
    setTimeout(() => {
      setCopiedStates(prev => ({ ...prev, [key]: false }));
    }, 2000);
  };

  const sections = [
    { id: 'overview', title: '设计概览', icon: Eye },
    { id: 'architecture', title: '架构设计', icon: Layers },
    { id: 'workflow', title: '设计流程', icon: GitBranch },
    { id: 'components', title: '组件规范', icon: Code },
    { id: 'development', title: '开发最佳实践', icon: Target },
    { id: 'template', title: '设计模板', icon: FileText },
    { id: 'prompts', title: 'AI助手指南', icon: Zap },
    { id: 'cursorrules', title: 'Cursor配置', icon: Settings },
    { id: 'examples', title: '实战案例', icon: Star }
  ];

  const cursorrules = `# ESG产品设计框架 - Cursor配置规则

## 核心原则
你是一个专业的产品经理助手，专门帮助设计ESG平台的功能模块。请严格按照以下架构和规范进行设计。

## 设计架构
请始终采用**三段式设计架构**：
1. **用户场景与用例** (UserScenarios.jsx)
   - 用户角色定义和分析
   - 核心业务场景梳理
   - 完整业务流程设计
2. **PRD产品需求文档** (PRDDesign.jsx)
   - 产品概览和目标定义
   - 功能需求详细规范
   - 非功能需求说明
   - 业务流程图和逻辑图
3. **交互原型展示** (Prototype.jsx)
   - 可交互的界面原型
   - 核心功能演示
   - 数据可视化展示

## 分层架构原则
所有功能模块必须归属于以下四个层级之一：
- **整合展示层**: 统一用户体验和跨模块协作
- **核心业务层**: ESG核心业务功能模块
- **管理支撑层**: 权限管理、合规监控和分析报告
- **基础设施层**: 系统基础功能和数据服务

## 命名规范
- 主模块容器: \`[ModuleName]Main.jsx\`
- 用户场景: \`[ModuleName]/UserScenarios.jsx\`
- PRD设计: \`[ModuleName]/PRDDesign.jsx\`
- 原型展示: \`[ModuleName]/Prototype.jsx\`

## UI设计规范
- 使用Tailwind CSS和Lucide图标
- 采用现代化渐变色和阴影效果
- 保持响应式设计和无障碍访问
- 统一的色彩体系和间距规范

## 功能模块要求
每个模块必须包含：

### 1. 用户场景与用例 (UserScenarios.jsx)
- **用户角色**: 至少定义4个核心用户角色，包含角色描述、职责范围、使用场景
- **核心场景**: 至少梳理5个主要业务场景，明确场景目标、触发条件、预期结果
- **业务流程**: 设计完整的端到端业务流程，包含泳道图、决策节点、异常处理

### 2. PRD产品需求文档 (PRDDesign.jsx)
- **产品概览**: 产品定位、目标用户、核心价值、成功指标
- **功能需求**: 详细的功能模块拆解、用例描述、接受标准
- **非功能需求**: 性能要求、安全要求、可用性要求、兼容性要求
- **流程图**: 核心业务流程图、系统架构图、数据流向图

### 3. 交互原型展示 (Prototype.jsx)
- **界面原型**: 可交互的真实界面，包含所有核心功能页面
- **功能演示**: 主要业务流程的完整操作演示
- **数据展示**: 关键数据的可视化图表和仪表板

## 数据和状态管理
- 使用React Context进行跨模块数据共享
- 统一的用户权限管理
- 标准化的API接口设计
- 完整的错误处理机制

## 产品设计深度要求
产品设计必须包含研发人员能直接实现的详细规范：
1. 完整的业务流程图和逻辑要点
2. 详细的交互设计规范
3. 数据流向和状态管理设计
4. 组件设计规范和API接口设计
5. 权限控制矩阵
6. 异常处理机制

设计文档需要提供具体的代码示例、技术实现要点、错误处理策略，确保开发和测试团队能够直接使用。

## 文件组织结构
\`\`\`
src/
├── [ModuleName]/
│   ├── UserScenarios.jsx
│   ├── PRDDesign.jsx
│   └── Prototype.jsx
├── [ModuleName]Main.jsx
├── shared/
│   ├── UnifiedNavigation.jsx
│   ├── SharedUIComponents.jsx
│   ├── DataIntegrationManager.jsx
│   ├── UserManagement.jsx
│   └── WorkflowManagement.jsx
└── ModuleCenter.jsx
\`\`\`

## 设计示例参考
参考已完成的模块：
- 工作台系统 (Workbench/)
- 碳足迹管理 (CarbonFootprint/)
- ESG平台整合原型 (IntegratedESGPlatform.jsx)

## 质量标准
- 代码可读性和可维护性
- 完整的TypeScript类型定义（如适用）
- 单元测试覆盖率要求
- 性能优化和最佳实践

## 开发最佳实践

### Mock数据设计要求
设计前端页面时必须包含完整的Mock数据：
- **数据真实性**：Mock数据应反映真实ESG业务场景，不少于100条记录
- **状态完整性**：包含正常、异常、边界等多种数据状态
- **时间序列**：体现数据的时间变化和历史趋势
- **层级关系**：展现组织架构、产品分类等层级结构
- **业务规则**：遵循GHG Protocol等ESG标准的数据规范

### 组件拆分策略
必须严格控制文件大小和组件职责：
- **文件大小限制**：单个组件文件不超过500行代码
- **子组件拆分**：超过100行的逻辑块应独立为子组件
- **目录结构规范**：
  \`\`\`
  [ModuleName]/
  ├── [ModuleName]Main.jsx (主容器，300行以内)
  ├── UserScenarios.jsx (400行以内)
  ├── PRDDesign.jsx (500行以内)  
  ├── Prototype.jsx (400行以内)
  ├── components/ (子组件目录)
  ├── hooks/ (自定义Hook)
  ├── utils/ (工具函数)
  ├── constants/ (常量和Mock数据)
  └── styles/ (样式文件)
  \`\`\`

### 完整原型逻辑要求
每个原型页面必须实现完整的交互逻辑：
- **端到端流程**：实现完整的用户操作路径，从登录到业务完成
- **状态管理**：正确处理加载、成功、错误等所有状态
- **表单验证**：实现客户端验证和错误提示机制
- **数据联动**：组件间数据变化能正确传播和响应
- **导航逻辑**：页面间跳转和返回逻辑清晰正确
- **无死链接**：所有按钮都必须有响应行为，不能有无效的点击

### 代码质量保证
- **命名规范**：组件PascalCase，函数camelCase，常量UPPER_CASE
- **注释完整**：复杂逻辑必须注释，组件props使用JSDoc
- **性能优化**：使用React.memo、useMemo等优化渲染性能
- **错误处理**：完善的错误边界和用户友好的错误提示

### 交付标准检查清单
每个模块交付前必须通过以下检查：
- ✅ 功能完整性：所有设计功能都能正常使用
- ✅ 数据完整性：Mock数据覆盖所有业务场景
- ✅ 代码质量：无ESLint错误，代码结构清晰
- ✅ 用户体验：交互流畅，加载反馈及时
- ✅ 可维护性：组件拆分合理，职责清晰

当创建新模块时，请严格遵循以上规范，确保与现有架构的一致性和扩展性。`;

  const OverviewSection = () => (
    <div className="space-y-8">
      <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-6 text-white">
        <div className="flex items-center space-x-3 mb-4">
          <Sparkles className="w-8 h-8" />
          <h2 className="text-2xl font-bold">ESG产品设计框架</h2>
        </div>
        <p className="text-blue-100 text-lg leading-relaxed">
          基于分层架构的模块化设计体系，为ESG平台提供标准化、可复用的产品设计解决方案
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <div className="flex items-center space-x-3 mb-4">
            <Target className="w-6 h-6 text-green-600" />
            <h3 className="text-lg font-bold text-gray-900">设计目标</h3>
          </div>
          <ul className="space-y-2 text-sm text-gray-600">
            <li className="flex items-center space-x-2">
              <CheckCircle className="w-4 h-4 text-green-500" />
              <span>标准化产品设计流程</span>
            </li>
            <li className="flex items-center space-x-2">
              <CheckCircle className="w-4 h-4 text-green-500" />
              <span>提升多产品经理协作效率</span>
            </li>
            <li className="flex items-center space-x-2">
              <CheckCircle className="w-4 h-4 text-green-500" />
              <span>确保设计质量和一致性</span>
            </li>
            <li className="flex items-center space-x-2">
              <CheckCircle className="w-4 h-4 text-green-500" />
              <span>降低开发实现难度</span>
            </li>
          </ul>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <div className="flex items-center space-x-3 mb-4">
            <Zap className="w-6 h-6 text-orange-600" />
            <h3 className="text-lg font-bold text-gray-900">核心优势</h3>
          </div>
          <ul className="space-y-2 text-sm text-gray-600">
            <li className="flex items-center space-x-2">
              <ArrowRight className="w-4 h-4 text-orange-500" />
              <span>分层架构清晰可见</span>
            </li>
            <li className="flex items-center space-x-2">
              <ArrowRight className="w-4 h-4 text-orange-500" />
              <span>三段式设计规范</span>
            </li>
            <li className="flex items-center space-x-2">
              <ArrowRight className="w-4 h-4 text-orange-500" />
              <span>组件化复用设计</span>
            </li>
            <li className="flex items-center space-x-2">
              <ArrowRight className="w-4 h-4 text-orange-500" />
              <span>完整的开发指导</span>
            </li>
          </ul>
        </div>
      </div>

      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
        <div className="flex items-center space-x-3 mb-3">
          <Lightbulb className="w-6 h-6 text-yellow-600" />
          <h3 className="text-lg font-bold text-yellow-800">适用场景</h3>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
          <div className="bg-white rounded-lg p-4 border">
            <h4 className="font-medium text-gray-900 mb-2">新功能设计</h4>
            <p className="text-gray-600">从零开始设计新的ESG功能模块</p>
          </div>
          <div className="bg-white rounded-lg p-4 border">
            <h4 className="font-medium text-gray-900 mb-2">现有功能重构</h4>
            <p className="text-gray-600">按标准架构重新组织已有功能</p>
          </div>
          <div className="bg-white rounded-lg p-4 border">
            <h4 className="font-medium text-gray-900 mb-2">跨模块协作</h4>
            <p className="text-gray-600">多产品经理协同设计大型功能</p>
          </div>
        </div>
      </div>
    </div>
  );

  const ArchitectureSection = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4">分层架构设计</h3>
        <div className="space-y-6">
          {[
            {
              title: '整合展示层',
              subtitle: 'Integration & Presentation Layer',
              description: '统一的用户体验和跨模块协作',
              color: 'from-purple-600 to-indigo-600',
              examples: ['ESG平台整合原型', '统一导航系统', '跨模块数据共享']
            },
            {
              title: '核心业务层',
              subtitle: 'Core Business Layer', 
              description: '核心ESG业务功能模块',
              color: 'from-emerald-600 to-teal-600',
              examples: ['工作台系统', '碳足迹管理', '供应链ESG']
            },
            {
              title: '管理支撑层',
              subtitle: 'Management Support Layer',
              description: '权限管理、合规监控和分析报告',
              color: 'from-blue-600 to-cyan-600',
              examples: ['用户管理', '合规管理', '报告中心']
            },
            {
              title: '基础设施层',
              subtitle: 'Infrastructure Layer',
              description: '系统基础功能和数据服务',
              color: 'from-slate-600 to-gray-600',
              examples: ['数据集成', '通知中心', '系统配置']
            }
          ].map((layer, index) => (
            <div key={index} className="relative">
              <div className="bg-gradient-to-br from-gray-50 to-blue-50 rounded-lg p-4 border">
                <div className={`inline-flex items-center px-3 py-1 rounded-full bg-gradient-to-r ${layer.color} text-white text-sm font-medium mb-2`}>
                  <Layers className="w-4 h-4 mr-2" />
                  {layer.title}
                </div>
                <h4 className="text-lg font-bold text-gray-900 mb-1">{layer.subtitle}</h4>
                <p className="text-sm text-gray-600 mb-3">{layer.description}</p>
                <div className="flex flex-wrap gap-2">
                  {layer.examples.map((example, i) => (
                    <span key={i} className="px-2 py-1 bg-white text-xs rounded border text-gray-700">
                      {example}
                    </span>
                  ))}
                </div>
              </div>
              {index < 3 && (
                <div className="flex justify-center mt-2 mb-2">
                  <ArrowRight className="w-5 h-5 text-gray-400 rotate-90" />
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4">三段式设计架构</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[
            {
              title: '用户场景与用例',
              subtitle: 'UserScenarios.jsx',
              icon: Users,
              color: 'text-blue-600 bg-blue-50',
              content: ['用户角色定义', '核心业务场景', '完整业务流程', '泳道图设计']
            },
            {
              title: 'PRD产品需求文档',
              subtitle: 'PRDDesign.jsx',
              icon: FileText,
              color: 'text-green-600 bg-green-50',
              content: ['产品概览', '功能需求', '非功能需求', '业务流程图']
            },
            {
              title: '交互原型展示',
              subtitle: 'Prototype.jsx',
              icon: Eye,
              color: 'text-purple-600 bg-purple-50',
              content: ['界面原型', '功能演示', '数据可视化', '交互体验']
            }
          ].map((phase, index) => (
            <div key={index} className="border rounded-lg p-4">
              <div className={`w-12 h-12 rounded-lg ${phase.color} flex items-center justify-center mb-3`}>
                <phase.icon className={`w-6 h-6 ${phase.color.split(' ')[0]}`} />
              </div>
              <h4 className="font-bold text-gray-900 mb-1">{phase.title}</h4>
              <p className="text-sm text-gray-500 mb-3 font-mono">{phase.subtitle}</p>
              <ul className="space-y-1">
                {phase.content.map((item, i) => (
                  <li key={i} className="text-xs text-gray-600 flex items-center space-x-2">
                    <div className="w-1 h-1 rounded-full bg-gray-400"></div>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const WorkflowSection = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-6">完整设计流程</h3>
        <div className="space-y-4">
          {[
            {
              step: 1,
              title: '需求分析与架构定位',
              description: '确定功能模块在四层架构中的位置',
              tasks: ['分析业务需求', '确定架构层级', '评估模块复杂度', '制定设计计划'],
              time: '1-2天',
              icon: Target
            },
            {
              step: 2,
              title: '用户场景与用例设计',
              description: '深入分析用户角色、核心场景和业务流程',
              tasks: ['用户角色定义', '核心场景梳理', '业务流程设计', '泳道图绘制'],
              time: '2-3天',
              icon: Users
            },
            {
              step: 3,
              title: 'PRD产品需求文档',
              description: '撰写完整的产品需求文档',
              tasks: ['产品概览编写', '功能需求设计', '非功能需求', '流程图绘制'],
              time: '3-4天',
              icon: FileText
            },
            {
              step: 4,
              title: '交互原型展示',
              description: '创建可交互的产品原型',
              tasks: ['界面原型设计', '功能演示实现', '数据可视化', '交互体验优化'],
              time: '4-5天',
              icon: Eye
            },
            {
              step: 5,
              title: '集成与测试',
              description: '将模块集成到整体架构中',
              tasks: ['模块集成', '导航配置', '数据联调', '功能测试'],
              time: '1-2天',
              icon: GitBranch
            }
          ].map((phase, index) => (
            <div key={index} className="flex space-x-4 p-4 border rounded-lg hover:shadow-md transition-shadow">
              <div className="flex-shrink-0">
                <div className="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold">
                  {phase.step}
                </div>
              </div>
              <div className="flex-1">
                <div className="flex items-center justify-between mb-2">
                  <h4 className="text-lg font-bold text-gray-900">{phase.title}</h4>
                  <div className="flex items-center space-x-2">
                    <Clock className="w-4 h-4 text-gray-400" />
                    <span className="text-sm text-gray-500">{phase.time}</span>
                  </div>
                </div>
                <p className="text-gray-600 mb-3">{phase.description}</p>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                  {phase.tasks.map((task, i) => (
                    <span key={i} className="px-2 py-1 bg-gray-100 text-xs rounded text-gray-700">
                      {task}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg border p-6">
        <div className="flex items-center space-x-3 mb-4">
          <CheckCircle className="w-6 h-6 text-green-600" />
          <h3 className="text-lg font-bold text-gray-900">质量检查清单</h3>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <h4 className="font-medium text-gray-900 mb-2">设计完整性</h4>
            <ul className="space-y-1 text-sm text-gray-600">
              <li>✓ 用户场景覆盖完整</li>
              <li>✓ PRD文档详细具体</li>
              <li>✓ 原型交互完善</li>
              <li>✓ 技术实现可行</li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium text-gray-900 mb-2">架构一致性</h4>
            <ul className="space-y-1 text-sm text-gray-600">
              <li>✓ 层级归属明确</li>
              <li>✓ 命名规范统一</li>
              <li>✓ 组件复用合理</li>
              <li>✓ 数据流向清晰</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );

  const ComponentsSection = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4">三段式设计详细要求</h3>
        <div className="space-y-6">
          <div className="border-l-4 border-blue-500 pl-4 bg-blue-50 p-4 rounded-r-lg">
            <h4 className="font-bold text-blue-900 mb-2">1. 用户场景与用例 (UserScenarios.jsx)</h4>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
              <div>
                <h5 className="font-medium text-blue-800 mb-1">用户角色</h5>
                <ul className="text-blue-700 space-y-1">
                  <li>• 至少4个核心角色</li>
                  <li>• 角色描述和职责</li>
                  <li>• 使用场景分析</li>
                  <li>• 痛点和需求</li>
                </ul>
              </div>
              <div>
                <h5 className="font-medium text-blue-800 mb-1">核心场景</h5>
                <ul className="text-blue-700 space-y-1">
                  <li>• 至少5个业务场景</li>
                  <li>• 场景目标定义</li>
                  <li>• 触发条件说明</li>
                  <li>• 预期结果描述</li>
                </ul>
              </div>
              <div>
                <h5 className="font-medium text-blue-800 mb-1">业务流程</h5>
                <ul className="text-blue-700 space-y-1">
                  <li>• 端到端流程设计</li>
                  <li>• 泳道图绘制</li>
                  <li>• 决策节点标注</li>
                  <li>• 异常处理路径</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="border-l-4 border-green-500 pl-4 bg-green-50 p-4 rounded-r-lg">
            <h4 className="font-bold text-green-900 mb-2">2. PRD产品需求文档 (PRDDesign.jsx)</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
              <div>
                <h5 className="font-medium text-green-800 mb-1">产品概览</h5>
                <ul className="text-green-700 space-y-1">
                  <li>• 产品定位和目标</li>
                  <li>• 目标用户群体</li>
                  <li>• 核心价值主张</li>
                  <li>• 成功衡量指标</li>
                </ul>
                
                <h5 className="font-medium text-green-800 mb-1 mt-3">功能需求</h5>
                <ul className="text-green-700 space-y-1">
                  <li>• 功能模块拆解</li>
                  <li>• 详细用例描述</li>
                  <li>• 验收标准定义</li>
                  <li>• 优先级排序</li>
                </ul>
              </div>
              <div>
                <h5 className="font-medium text-green-800 mb-1">非功能需求</h5>
                <ul className="text-green-700 space-y-1">
                  <li>• 性能要求</li>
                  <li>• 安全要求</li>
                  <li>• 可用性要求</li>
                  <li>• 兼容性要求</li>
                </ul>
                
                <h5 className="font-medium text-green-800 mb-1 mt-3">流程图</h5>
                <ul className="text-green-700 space-y-1">
                  <li>• 业务流程图</li>
                  <li>• 系统架构图</li>
                  <li>• 数据流向图</li>
                  <li>• 状态转换图</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="border-l-4 border-purple-500 pl-4 bg-purple-50 p-4 rounded-r-lg">
            <h4 className="font-bold text-purple-900 mb-2">3. 交互原型展示 (Prototype.jsx)</h4>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
              <div>
                <h5 className="font-medium text-purple-800 mb-1">界面原型</h5>
                <ul className="text-purple-700 space-y-1">
                  <li>• 可交互界面</li>
                  <li>• 核心功能页面</li>
                  <li>• 响应式设计</li>
                  <li>• 状态管理</li>
                </ul>
              </div>
              <div>
                <h5 className="font-medium text-purple-800 mb-1">功能演示</h5>
                <ul className="text-purple-700 space-y-1">
                  <li>• 主要业务流程</li>
                  <li>• 完整操作演示</li>
                  <li>• 用户交互体验</li>
                  <li>• 错误处理展示</li>
                </ul>
              </div>
              <div>
                <h5 className="font-medium text-purple-800 mb-1">数据展示</h5>
                <ul className="text-purple-700 space-y-1">
                  <li>• 可视化图表</li>
                  <li>• 仪表板设计</li>
                  <li>• 数据筛选功能</li>
                  <li>• 导出打印功能</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg border border-blue-200 p-6">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-bold text-gray-900 mb-2">💡 实用设计模板</h3>
            <p className="text-sm text-gray-600">
              查看完整的三段式设计模板，包含具体的示例内容和格式规范
            </p>
          </div>
          <button
            onClick={() => setActiveSection('template')}
            className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
                            <FileText className="w-4 h-4" />
            <span>查看模板</span>
          </button>
        </div>
      </div>

      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4">文件组织结构</h3>
        <div className="bg-gray-900 rounded-lg p-4 text-green-400 font-mono text-sm">
          <pre>{`src/
├── [ModuleName]/
│   ├── UserScenarios.jsx      # 用户场景组件
│   ├── PRDDesign.jsx          # PRD文档组件
│   └── Prototype.jsx          # 原型展示组件
├── [ModuleName]Main.jsx       # 模块主容器
├── shared/                    # 共享组件库
│   ├── UnifiedNavigation.jsx  # 统一导航
│   ├── SharedUIComponents.jsx # UI组件库
│   ├── DataIntegrationManager.jsx # 数据管理
│   ├── UserManagement.jsx     # 用户管理
│   └── WorkflowManagement.jsx # 工作流管理
├── ModuleCenter.jsx           # 功能中心
└── App.jsx                    # 应用入口`}</pre>
        </div>
      </div>

      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4">命名规范</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-gray-900 mb-3">文件命名</h4>
            <div className="space-y-2 text-sm">
              <div className="p-3 bg-gray-50 rounded border">
                <code className="text-blue-600">CarbonFootprintMain.jsx</code>
                <p className="text-gray-600 mt-1">主模块容器，PascalCase + Main后缀</p>
              </div>
              <div className="p-3 bg-gray-50 rounded border">
                <code className="text-blue-600">UserScenarios.jsx</code>
                <p className="text-gray-600 mt-1">用户场景组件，PascalCase命名</p>
              </div>
              <div className="p-3 bg-gray-50 rounded border">
                <code className="text-blue-600">PRDDesign.jsx</code>
                <p className="text-gray-600 mt-1">PRD文档组件，缩写大写</p>
              </div>
            </div>
          </div>
          <div>
            <h4 className="font-medium text-gray-900 mb-3">组件结构</h4>
            <div className="space-y-2 text-sm">
              <div className="p-3 bg-gray-50 rounded border">
                <code className="text-green-600">const ModuleMain = ({ onBack })</code>
                <p className="text-gray-600 mt-1">主容器支持返回导航</p>
              </div>
              <div className="p-3 bg-gray-50 rounded border">
                <code className="text-green-600">useState('scenarios')</code>
                <p className="text-gray-600 mt-1">默认显示用户场景</p>
              </div>
              <div className="p-3 bg-gray-50 rounded border">
                <code className="text-green-600">export default ModuleMain</code>
                <p className="text-gray-600 mt-1">默认导出模块组件</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4">UI设计规范</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="border rounded-lg p-4">
            <h4 className="font-medium text-gray-900 mb-3">色彩体系</h4>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <div className="w-4 h-4 rounded bg-blue-600"></div>
                <span className="text-sm">主色调 - Blue 600</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-4 h-4 rounded bg-green-600"></div>
                <span className="text-sm">成功 - Green 600</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-4 h-4 rounded bg-amber-600"></div>
                <span className="text-sm">警告 - Amber 600</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-4 h-4 rounded bg-red-600"></div>
                <span className="text-sm">错误 - Red 600</span>
              </div>
            </div>
          </div>
          <div className="border rounded-lg p-4">
            <h4 className="font-medium text-gray-900 mb-3">间距规范</h4>
            <div className="space-y-2 text-sm">
              <div>容器内边距: <code>p-4, p-6</code></div>
              <div>元素间距: <code>space-y-4, gap-4</code></div>
              <div>卡片圆角: <code>rounded-lg</code></div>
              <div>阴影效果: <code>shadow-md</code></div>
            </div>
          </div>
          <div className="border rounded-lg p-4">
            <h4 className="font-medium text-gray-900 mb-3">字体规范</h4>
            <div className="space-y-2 text-sm">
              <div>主标题: <code>text-2xl font-bold</code></div>
              <div>副标题: <code>text-lg font-medium</code></div>
              <div>正文: <code>text-sm text-gray-600</code></div>
              <div>辅助文字: <code>text-xs text-gray-500</code></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const CursorRulesSection = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-xl font-bold text-gray-900">Cursor配置文件</h3>
          <button
            onClick={() => copyToClipboard(cursorrules, 'cursorrules')}
            className="flex items-center space-x-2 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            {copiedStates.cursorrules ? (
              <>
                <Check className="w-4 h-4" />
                <span>已复制</span>
              </>
            ) : (
              <>
                <Copy className="w-4 h-4" />
                <span>复制配置</span>
              </>
            )}
          </button>
        </div>
        
        <div className="bg-gray-900 rounded-lg p-4 max-h-96 overflow-y-auto">
          <pre className="text-green-400 font-mono text-sm whitespace-pre-wrap">{cursorrules}</pre>
        </div>
        
        <div className="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
          <div className="flex items-center space-x-2 mb-2">
            <Terminal className="w-5 h-5 text-blue-600" />
            <h4 className="font-medium text-blue-900">配置步骤</h4>
          </div>
          <ol className="list-decimal list-inside space-y-1 text-sm text-blue-800">
            <li>在项目根目录创建 <code>.cursorrules</code> 文件</li>
            <li>复制上述配置内容到文件中</li>
            <li>重启Cursor编辑器使配置生效</li>
            <li>开始使用"创建新模块"功能</li>
          </ol>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <h3 className="text-lg font-bold text-gray-900 mb-4">配置说明</h3>
          <div className="space-y-3 text-sm">
            <div className="p-3 bg-gray-50 rounded">
              <h4 className="font-medium text-gray-900">核心原则</h4>
              <p className="text-gray-600 mt-1">定义产品经理助手的基本角色和职责</p>
            </div>
            <div className="p-3 bg-gray-50 rounded">
              <h4 className="font-medium text-gray-900">设计架构</h4>
              <p className="text-gray-600 mt-1">强制执行三段式设计和四层架构</p>
            </div>
            <div className="p-3 bg-gray-50 rounded">
              <h4 className="font-medium text-gray-900">命名规范</h4>
              <p className="text-gray-600 mt-1">统一文件和组件的命名约定</p>
            </div>
            <div className="p-3 bg-gray-50 rounded">
              <h4 className="font-medium text-gray-900">质量标准</h4>
              <p className="text-gray-600 mt-1">确保代码质量和设计深度要求</p>
            </div>
            <div className="p-3 bg-green-50 rounded border border-green-200">
              <h4 className="font-medium text-green-900">开发最佳实践</h4>
              <p className="text-green-700 mt-1">Mock数据设计、组件拆分、原型逻辑和质量保证要求</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <h3 className="text-lg font-bold text-gray-900 mb-4">使用技巧</h3>
          <div className="space-y-3 text-sm">
            <div className="flex items-start space-x-3">
              <div className="w-2 h-2 rounded-full bg-green-500 mt-2"></div>
              <div>
                <h4 className="font-medium text-gray-900">新建模块</h4>
                <p className="text-gray-600">直接描述需求，AI会按架构创建完整模块</p>
              </div>
            </div>
            <div className="flex items-start space-x-3">
              <div className="w-2 h-2 rounded-full bg-blue-500 mt-2"></div>
              <div>
                <h4 className="font-medium text-gray-900">架构定位</h4>
                <p className="text-gray-600">说明功能类型，AI会自动选择合适的架构层级</p>
              </div>
            </div>
            <div className="flex items-start space-x-3">
              <div className="w-2 h-2 rounded-full bg-purple-500 mt-2"></div>
              <div>
                <h4 className="font-medium text-gray-900">组件复用</h4>
                <p className="text-gray-600">AI会优先使用shared/下的共享组件</p>
              </div>
            </div>
            <div className="flex items-start space-x-3">
              <div className="w-2 h-2 rounded-full bg-orange-500 mt-2"></div>
              <div>
                <h4 className="font-medium text-gray-900">质量保证</h4>
                <p className="text-gray-600">自动检查设计完整性和代码规范</p>
              </div>
            </div>
            <div className="flex items-start space-x-3">
              <div className="w-2 h-2 rounded-full bg-green-500 mt-2"></div>
              <div>
                <h4 className="font-medium text-gray-900">开发实践</h4>
                <p className="text-gray-600">自动应用Mock数据要求和组件拆分策略</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const DevelopmentSection = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
          <Target className="w-6 h-6 text-green-500 mr-2" />
          开发最佳实践：Mock数据与组件拆分
        </h3>
        <p className="text-gray-600 mb-6">
          为确保前端页面的完整性和可维护性，需要遵循以下开发最佳实践，包括Mock数据设计、组件拆分策略和完整原型逻辑实现。
        </p>

        {/* Mock数据设计规范 */}
        <div className="bg-blue-50 rounded-lg p-6 mb-6">
          <h4 className="text-lg font-semibold text-blue-900 mb-4 flex items-center">
            <Database className="w-5 h-5 mr-2" />
            1. Mock数据设计规范
          </h4>
          
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border-l-4 border-blue-500">
              <h5 className="font-semibold text-gray-800 mb-2">数据真实性要求</h5>
              <div className="bg-gray-50 rounded p-3 text-sm">
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li><strong>业务场景贴合：</strong>Mock数据应反映真实的ESG业务场景和数据特征</li>
                  <li><strong>数据量级真实：</strong>模拟企业级应用的数据量，不少于100条记录</li>
                  <li><strong>多状态覆盖：</strong>包含正常、异常、边界等多种数据状态</li>
                  <li><strong>时间序列完整：</strong>体现数据的时间变化和历史趋势</li>
                  <li><strong>层级关系清晰：</strong>展现组织架构、产品分类等层级结构</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-blue-500">
              <h5 className="font-semibold text-gray-800 mb-2">Mock数据结构示例</h5>
              <div className="bg-gray-900 rounded p-3 text-sm overflow-x-auto">
                <pre className="text-green-400"><code>{`// ESG碳足迹Mock数据示例
const mockCarbonData = {
  organizations: [
    {
      id: 'ORG_001',
      name: '绿色科技有限公司',
      industry: '制造业',
      employees: 1250,
      locations: ['上海', '苏州', '广州'],
      establishedYear: 2018,
      carbonTargets: {
        baselineYear: 2020,
        baselineEmissions: 45600, // tCO2e
        reductionTarget: 30, // %
        targetYear: 2030,
        currentReduction: 12 // %
      }
    }
  ],
  
  emissions: [
    {
      id: 'EM_001',
      organizationId: 'ORG_001',
      year: 2024,
      month: 3,
      scope1: 2850.5, // 直接排放
      scope2: 4200.8, // 间接排放
      scope3: 8900.2, // 其他间接排放
      status: 'verified',
      dataQuality: 'high',
      lastUpdated: '2024-03-15T09:30:00Z'
    }
  ],
  
  reductionActions: [
    {
      id: 'ACT_001',
      title: '太阳能发电系统安装',
      type: 'renewable_energy',
      status: 'in_progress',
      progress: 65,
      expectedReduction: 800, // tCO2e/year
      investment: 2500000, // CNY
      startDate: '2024-01-15',
      expectedCompletion: '2024-06-30'
    }
  ]
};`}</code></pre>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-blue-500">
              <h5 className="font-semibold text-gray-800 mb-2">数据生成工具推荐</h5>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="bg-gray-50 rounded p-3">
                  <h6 className="font-medium text-gray-800 mb-1">JavaScript Mock库</h6>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• Faker.js - 生成各类虚拟数据</li>
                    <li>• Mock.js - 拦截Ajax请求</li>
                    <li>• JSON Server - 快速搭建Mock API</li>
                  </ul>
                </div>
                <div className="bg-gray-50 rounded p-3">
                  <h6 className="font-medium text-gray-800 mb-1">ESG专业数据</h6>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• GHG Protocol排放因子</li>
                    <li>• 国家电网排放因子数据</li>
                    <li>• 行业标杆数据参考</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 组件拆分策略 */}
        <div className="bg-green-50 rounded-lg p-6 mb-6">
          <h4 className="text-lg font-semibold text-green-900 mb-4 flex items-center">
            <Code className="w-5 h-5 mr-2" />
            2. 组件拆分策略
          </h4>
          
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border-l-4 border-green-500">
              <h5 className="font-semibold text-gray-800 mb-2">文件大小控制</h5>
              <div className="bg-gray-50 rounded p-3 text-sm">
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li><strong>主文件限制：</strong>单个组件文件不超过500行代码</li>
                  <li><strong>子组件拆分：</strong>超过100行的逻辑块应独立为子组件</li>
                  <li><strong>工具函数分离：</strong>业务逻辑和工具函数单独文件管理</li>
                  <li><strong>样式分离：</strong>复杂样式使用CSS模块或Styled Components</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-green-500">
              <h5 className="font-semibold text-gray-800 mb-2">组件层级设计</h5>
              <div className="bg-gray-900 rounded p-3 text-sm overflow-x-auto">
                <pre className="text-green-400"><code>{`// 推荐的文件组织结构
src/
├── [ModuleName]/
│   ├── [ModuleName]Main.jsx          // 主容器(300行以内)
│   ├── UserScenarios.jsx             // 用户场景(400行以内)
│   ├── PRDDesign.jsx                 // 产品需求(500行以内)
│   ├── Prototype.jsx                 // 原型展示(400行以内)
│   ├── components/                   // 子组件目录
│   │   ├── Dashboard.jsx             // 仪表板组件
│   │   ├── DataTable.jsx             // 数据表格组件
│   │   ├── ChartComponents.jsx       // 图表组件集合
│   │   ├── FormComponents.jsx        // 表单组件集合
│   │   └── ModalComponents.jsx       // 弹窗组件集合
│   ├── hooks/                        // 自定义Hook
│   │   ├── useDataFetching.js        // 数据获取Hook
│   │   ├── useFormValidation.js      // 表单验证Hook
│   │   └── useChartData.js           // 图表数据处理Hook
│   ├── utils/                        // 工具函数
│   │   ├── dataProcessing.js         // 数据处理工具
│   │   ├── calculations.js           // 计算工具
│   │   └── formatters.js             // 格式化工具
│   ├── constants/                    // 常量定义
│   │   ├── mockData.js               // Mock数据
│   │   ├── apiEndpoints.js           // API端点
│   │   └── businessConstants.js      // 业务常量
│   └── styles/                       // 样式文件
│       ├── module.module.css         // CSS模块
│       └── components.css            // 组件样式`}</code></pre>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-green-500">
              <h5 className="font-semibold text-gray-800 mb-2">组件设计原则</h5>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="bg-gray-50 rounded p-3">
                  <h6 className="font-medium text-gray-800 mb-1">单一职责原则</h6>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• 每个组件只负责一个功能</li>
                    <li>• 数据展示与业务逻辑分离</li>
                    <li>• UI组件与状态管理分离</li>
                  </ul>
                </div>
                <div className="bg-gray-50 rounded p-3">
                  <h6 className="font-medium text-gray-800 mb-1">可复用性设计</h6>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• 通过props配置组件行为</li>
                    <li>• 抽象共同的UI模式</li>
                    <li>• 提供清晰的组件API</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 完整原型逻辑 */}
        <div className="bg-purple-50 rounded-lg p-6 mb-6">
          <h4 className="text-lg font-semibold text-purple-900 mb-4 flex items-center">
            <Activity className="w-5 h-5 mr-2" />
            3. 完整原型逻辑实现
          </h4>
          
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border-l-4 border-purple-500">
              <h5 className="font-semibold text-gray-800 mb-2">交互完整性要求</h5>
              <div className="bg-gray-50 rounded p-3 text-sm">
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li><strong>端到端流程：</strong>实现完整的用户操作路径，从登录到业务完成</li>
                  <li><strong>状态管理：</strong>正确处理加载、成功、错误等所有状态</li>
                  <li><strong>表单验证：</strong>实现客户端验证和错误提示机制</li>
                  <li><strong>数据联动：</strong>组件间数据变化能正确传播和响应</li>
                  <li><strong>导航逻辑：</strong>页面间跳转和返回逻辑清晰正确</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-purple-500">
              <h5 className="font-semibold text-gray-800 mb-2">原型逻辑检查清单</h5>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="bg-gray-50 rounded p-3">
                  <h6 className="font-medium text-gray-800 mb-1">✅ 必须实现</h6>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>□ 所有按钮都有响应行为</li>
                    <li>□ 表单提交有验证和反馈</li>
                    <li>□ 数据加载有Loading状态</li>
                    <li>□ 错误情况有提示信息</li>
                    <li>□ 模态框能正确打开关闭</li>
                    <li>□ 搜索筛选功能可用</li>
                  </ul>
                </div>
                <div className="bg-gray-50 rounded p-3">
                  <h6 className="font-medium text-gray-800 mb-1">🎯 优化建议</h6>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>□ 添加页面切换动画</li>
                    <li>□ 实现键盘快捷键</li>
                    <li>□ 支持拖拽排序功能</li>
                    <li>□ 添加撤销重做功能</li>
                    <li>□ 实现自动保存草稿</li>
                    <li>□ 支持批量操作</li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-purple-500">
              <h5 className="font-semibold text-gray-800 mb-2">性能优化考虑</h5>
              <div className="bg-gray-50 rounded p-3 text-sm">
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li><strong>懒加载：</strong>大数据量表格和图表使用虚拟滚动</li>
                  <li><strong>缓存策略：</strong>合理使用React.memo和useMemo优化渲染</li>
                  <li><strong>代码分割：</strong>按路由和功能模块进行代码分割</li>
                  <li><strong>图片优化：</strong>使用WebP格式和适当的尺寸压缩</li>
                  <li><strong>网络优化：</strong>实现请求防抖和数据预取</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* 质量保证 */}
        <div className="bg-orange-50 rounded-lg p-6">
          <h4 className="text-lg font-semibold text-orange-900 mb-4 flex items-center">
            <CheckCircle className="w-5 h-5 mr-2" />
            4. 开发质量保证
          </h4>
          
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border-l-4 border-orange-500">
              <h5 className="font-semibold text-gray-800 mb-2">代码规范要求</h5>
              <div className="grid md:grid-cols-3 gap-4">
                <div className="bg-gray-50 rounded p-3">
                  <h6 className="font-medium text-gray-800 mb-1">命名规范</h6>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• 组件使用PascalCase</li>
                    <li>• 函数使用camelCase</li>
                    <li>• 常量使用UPPER_CASE</li>
                    <li>• 文件名与组件名一致</li>
                  </ul>
                </div>
                <div className="bg-gray-50 rounded p-3">
                  <h6 className="font-medium text-gray-800 mb-1">注释要求</h6>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• 复杂逻辑必须注释</li>
                    <li>• 组件props使用JSDoc</li>
                    <li>• API接口要有说明</li>
                    <li>• 业务规则要有解释</li>
                  </ul>
                </div>
                <div className="bg-gray-50 rounded p-3">
                  <h6 className="font-medium text-gray-800 mb-1">测试覆盖</h6>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• 核心组件单元测试</li>
                    <li>• 关键流程集成测试</li>
                    <li>• 边界条件测试</li>
                    <li>• 用户交互测试</li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-orange-500">
              <h5 className="font-semibold text-gray-800 mb-2">交付标准</h5>
              <div className="bg-gray-50 rounded p-3 text-sm">
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li><strong>功能完整性：</strong>所有设计功能都能正常使用，无死链接或无响应按钮</li>
                  <li><strong>数据完整性：</strong>Mock数据覆盖所有业务场景，数据量符合企业级标准</li>
                  <li><strong>代码质量：</strong>无ESLint错误，代码结构清晰，注释完整</li>
                  <li><strong>用户体验：</strong>交互流畅，加载反馈及时，错误提示友好</li>
                  <li><strong>可维护性：</strong>组件拆分合理，职责清晰，便于后续迭代</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const PromptsSection = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
          <Zap className="w-6 h-6 text-yellow-500 mr-2" />
          AI助手指南：产品经理专用Prompt集合
        </h3>
        <p className="text-gray-600 mb-6">
          这套prompt集合专门为ESG平台产品设计优化，帮助产品经理高效利用AI助手完成三段式设计架构。
        </p>

        {/* 阶段1：用户场景与用例设计 */}
        <div className="bg-blue-50 rounded-lg p-6 mb-6">
          <h4 className="text-lg font-semibold text-blue-900 mb-4 flex items-center">
            <Users className="w-5 h-5 mr-2" />
            阶段1：用户场景与用例设计Prompt
          </h4>
          
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border-l-4 border-blue-500">
              <h5 className="font-semibold text-gray-800 mb-2">1.1 用户角色定义Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 请为[模块名称]设计4个核心用户角色。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>每个角色包含：角色名称、职责描述、专业背景、工作场景、核心痛点</li>
                  <li>角色要覆盖ESG价值链的不同环节：数据录入、分析决策、合规审核、管理监督</li>
                  <li>明确每个角色的权限等级和系统使用频率</li>
                  <li>提供具体的人物画像和使用情境描述</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-blue-500">
              <h5 className="font-semibold text-gray-800 mb-2">1.2 核心场景梳理Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 基于上述用户角色，设计5个核心业务场景。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>每个场景包含：场景名称、触发条件、参与角色、目标结果、优先级(P0-P2)</li>
                  <li>场景要体现ESG业务的端到端流程：数据采集→处理分析→报告生成→合规审核</li>
                  <li>估算每个场景的开发工作量（人天）和业务价值</li>
                  <li>识别场景间的依赖关系和执行顺序</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-blue-500">
              <h5 className="font-semibold text-gray-800 mb-2">1.3 业务流程设计Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 为核心场景设计完整的端到端业务流程。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>绘制泳道图，明确每个角色在各个步骤中的职责</li>
                  <li>标注关键决策点、审批节点和异常处理分支</li>
                  <li>定义每个步骤的输入输出、时间要求和质量标准</li>
                  <li>识别自动化机会和系统集成点</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* 阶段2：PRD产品需求文档 */}
        <div className="bg-green-50 rounded-lg p-6 mb-6">
          <h4 className="text-lg font-semibold text-green-900 mb-4 flex items-center">
            <FileText className="w-5 h-5 mr-2" />
            阶段2：PRD产品需求文档Prompt
          </h4>
          
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border-l-4 border-green-500">
              <h5 className="font-semibold text-gray-800 mb-2">2.1 产品概览设计Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 编写[模块名称]的产品概览。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>产品定位：在ESG平台中的角色、解决的核心问题、差异化优势</li>
                  <li>目标用户：主要用户群体、使用场景、预期收益</li>
                  <li>核心价值：业务价值、技术价值、合规价值的量化指标</li>
                  <li>成功指标：用户活跃度、业务效率提升、合规达标率等KPI</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-green-500">
              <h5 className="font-semibold text-gray-800 mb-2">2.2 功能需求拆解Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 将业务场景转化为详细的功能需求。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>功能模块拆解：按照业务逻辑分解为5-8个子模块</li>
                  <li>用例描述：每个功能的前置条件、操作步骤、预期结果</li>
                  <li>接受标准：可测试的验收条件和质量要求</li>
                  <li>边界定义：明确功能范围和不包含的内容</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-green-500">
              <h5 className="font-semibold text-gray-800 mb-2">2.3 技术架构设计Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 设计技术实现架构和API规范。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>系统架构图：前端组件结构、后端服务设计、数据流向</li>
                  <li>API接口设计：RESTful接口规范、请求响应格式、错误码定义</li>
                  <li>数据模型设计：实体关系、字段定义、约束条件</li>
                  <li>权限控制矩阵：角色权限映射、数据访问控制、操作审计</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* 阶段3：交互原型展示 */}
        <div className="bg-purple-50 rounded-lg p-6 mb-6">
          <h4 className="text-lg font-semibold text-purple-900 mb-4 flex items-center">
            <Activity className="w-5 h-5 mr-2" />
            阶段3：交互原型展示Prompt
          </h4>
          
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border-l-4 border-purple-500">
              <h5 className="font-semibold text-gray-800 mb-2">3.1 界面原型设计Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 创建可交互的界面原型。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>页面结构：主要页面的布局设计、导航逻辑、信息架构</li>
                  <li>交互设计：按钮、表单、弹窗等组件的交互行为</li>
                  <li>状态管理：数据加载、错误处理、成功反馈的UI状态</li>
                  <li>响应式设计：适配不同屏幕尺寸的布局调整</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-purple-500">
              <h5 className="font-semibold text-gray-800 mb-2">3.2 功能演示流程Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 设计核心功能的完整操作演示。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>操作流程：step-by-step的用户操作路径</li>
                  <li>模拟数据：真实业务场景的示例数据</li>
                  <li>关键节点：重要决策点和确认环节的设计</li>
                  <li>异常处理：错误情况的用户体验设计</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-purple-500">
              <h5 className="font-semibold text-gray-800 mb-2">3.3 数据可视化设计Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 设计ESG数据的可视化展示。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>仪表板设计：关键指标的实时监控面板</li>
                  <li>图表选择：适合ESG数据特点的图表类型（趋势、对比、分布）</li>
                  <li>交互功能：钻取、筛选、导出等数据分析功能</li>
                  <li>预警机制：异常数据的提醒和告警设计</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* 质量检查和优化 */}
        <div className="bg-orange-50 rounded-lg p-6 mb-6">
          <h4 className="text-lg font-semibold text-orange-900 mb-4 flex items-center">
            <CheckCircle className="w-5 h-5 mr-2" />
            质量检查与优化Prompt
          </h4>
          
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border-l-4 border-orange-500">
              <h5 className="font-semibold text-gray-800 mb-2">设计完整性检查Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 对已完成的设计进行全面检查。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>三段式完整性：UserScenarios、PRDDesign、Prototype是否都完整</li>
                  <li>用户体验一致性：不同页面间的交互逻辑是否统一</li>
                  <li>业务逻辑完整性：是否覆盖了所有核心业务场景</li>
                  <li>技术可行性：设计方案是否符合开发能力和时间要求</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-lg p-4 border-l-4 border-orange-500">
              <h5 className="font-semibold text-gray-800 mb-2">迭代优化建议Prompt</h5>
              <div className="bg-gray-50 rounded p-3 text-sm font-mono">
                <p className="mb-2">
                  <strong>Prompt:</strong> 基于设计评审提供优化建议。要求：
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-700">
                  <li>用户反馈整合：如何改进用户体验和操作效率</li>
                  <li>技术优化建议：性能、安全、可维护性的改进方案</li>
                  <li>业务价值提升：如何增强功能的商业价值</li>
                  <li>未来扩展规划：为后续功能迭代留出接口和空间</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* 使用指南 */}
        <div className="bg-gray-50 rounded-lg p-6">
          <h4 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
            <Lightbulb className="w-5 h-5 mr-2" />
            AI助手使用最佳实践
          </h4>
          
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-3">
              <h5 className="font-semibold text-gray-800">✅ 推荐做法</h5>
              <ul className="text-sm text-gray-600 space-y-2">
                <li>• 按阶段顺序使用prompt，确保逻辑连贯</li>
                <li>• 提供具体的模块名称和业务背景</li>
                <li>• 每次只专注一个设计环节，避免混合</li>
                <li>• 及时保存AI生成的内容，便于后续迭代</li>
                <li>• 结合实际业务需求调整prompt内容</li>
              </ul>
            </div>
            
            <div className="space-y-3">
              <h5 className="font-semibold text-gray-800">❌ 避免做法</h5>
              <ul className="text-sm text-gray-600 space-y-2">
                <li>• 不要跳跃式使用prompt，会导致逻辑断层</li>
                <li>• 避免过于宽泛的需求描述</li>
                <li>• 不要期望一次性生成完美的设计</li>
                <li>• 避免忽略技术可行性和资源限制</li>
                <li>• 不要忽视用户反馈和迭代优化</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const ExamplesSection = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4">实战案例分析</h3>
        <div className="space-y-6">
          {[
            {
              title: '碳足迹管理模块',
              category: '核心业务层',
              complexity: '高',
              features: ['数据收集管理', '碳足迹计算', '减排目标跟踪', '供应链管理', '报告披露'],
              highlights: ['三范围碳排放覆盖', '实时计算引擎', '可视化仪表板', '合规报告生成'],
              lessons: ['业务逻辑复杂需要详细PRD', '计算功能需要算法说明', '可视化组件可以复用']
            },
            {
              title: '工作台系统',
              category: '核心业务层',
              complexity: '中',
              features: ['数据录入', '审批流程', '报告生成', '仪表板'],
              highlights: ['统一工作入口', '流程化设计', '角色权限控制', '数据汇总展示'],
              lessons: ['工作流设计要考虑角色差异', 'UI交互要简洁高效', '数据展示要直观清晰']
            },
            {
              title: 'ESG平台整合原型',
              category: '整合展示层',
              complexity: '高',
              features: ['统一导航系统', '跨模块数据共享', '业务流程整合', '模块协作管理'],
              highlights: ['架构层次清晰', '模块间协作', '统一用户体验', '可扩展设计'],
              lessons: ['整合层要考虑全局架构', '数据共享机制很重要', '导航设计影响用户体验']
            }
          ].map((example, index) => (
            <div key={index} className="border rounded-lg p-4 hover:shadow-md transition-shadow">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center space-x-3">
                  <h4 className="text-lg font-bold text-gray-900">{example.title}</h4>
                  <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded">{example.category}</span>
                  <span className={`px-2 py-1 text-xs rounded ${
                    example.complexity === '高' ? 'bg-red-100 text-red-800' : 
                    example.complexity === '中' ? 'bg-yellow-100 text-yellow-800' : 
                    'bg-green-100 text-green-800'
                  }`}>
                    复杂度: {example.complexity}
                  </span>
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                <div>
                  <h5 className="font-medium text-gray-900 mb-2">核心功能</h5>
                  <div className="space-y-1">
                    {example.features.map((feature, i) => (
                      <span key={i} className="block px-2 py-1 bg-gray-100 text-xs rounded text-gray-700">
                        {feature}
                      </span>
                    ))}
                  </div>
                </div>
                <div>
                  <h5 className="font-medium text-gray-900 mb-2">设计亮点</h5>
                  <div className="space-y-1">
                    {example.highlights.map((highlight, i) => (
                      <span key={i} className="block px-2 py-1 bg-green-100 text-xs rounded text-green-700">
                        {highlight}
                      </span>
                    ))}
                  </div>
                </div>
                <div>
                  <h5 className="font-medium text-gray-900 mb-2">设计经验</h5>
                  <div className="space-y-1">
                    {example.lessons.map((lesson, i) => (
                      <span key={i} className="block px-2 py-1 bg-orange-100 text-xs rounded text-orange-700">
                        {lesson}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg border p-6">
        <div className="flex items-center space-x-3 mb-4">
          <Star className="w-6 h-6 text-yellow-600" />
          <h3 className="text-lg font-bold text-gray-900">最佳实践总结</h3>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-gray-900 mb-3">设计原则</h4>
            <ul className="space-y-2 text-sm text-gray-700">
              <li className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-600" />
                <span>始终从用户场景出发</span>
              </li>
              <li className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-600" />
                <span>PRD文档要详细具体</span>
              </li>
              <li className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-600" />
                <span>原型要突出核心功能</span>
              </li>
              <li className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-600" />
                <span>保持架构层次清晰</span>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium text-gray-900 mb-3">常见问题</h4>
            <ul className="space-y-2 text-sm text-gray-700">
              <li className="flex items-center space-x-2">
                <ArrowRight className="w-4 h-4 text-orange-600" />
                <span>避免功能模块划分不清</span>
              </li>
              <li className="flex items-center space-x-2">
                <ArrowRight className="w-4 h-4 text-orange-600" />
                <span>避免PRD文档过于简单</span>
              </li>
              <li className="flex items-center space-x-2">
                <ArrowRight className="w-4 h-4 text-orange-600" />
                <span>避免原型交互不完整</span>
              </li>
              <li className="flex items-center space-x-2">
                <ArrowRight className="w-4 h-4 text-orange-600" />
                <span>避免忽略跨模块协作</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );

  const renderSection = () => {
    switch (activeSection) {
      case 'overview': return <OverviewSection />;
      case 'architecture': return <ArchitectureSection />;
      case 'workflow': return <WorkflowSection />;
      case 'components': return <ComponentsSection />;
      case 'development': return <DevelopmentSection />;
      case 'template': return <DesignTemplate onBack={() => setActiveSection('overview')} />;
      case 'prompts': return <PromptsSection />;
      case 'cursorrules': return <CursorRulesSection />;
      case 'examples': return <ExamplesSection />;
      default: return <OverviewSection />;
    }
  };

  // 设计模板需要全屏显示
  if (activeSection === 'template') {
    return renderSection();
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
      {/* 头部 */}
      <div className="bg-white shadow-lg border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="p-2.5 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl shadow-lg">
                <Book className="w-7 h-7 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  产品设计教程
                </h1>
                <p className="text-gray-600 text-sm">ESG平台模块化设计完整指南</p>
              </div>
            </div>
            
            {onBack && (
              <button
                onClick={onBack}
                className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
              >
                <ArrowRight className="w-4 h-4 rotate-180" />
                <span>返回首页</span>
              </button>
            )}
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 py-6">
        <div className="flex space-x-6">
          {/* 侧边导航 */}
          <div className="w-64 flex-shrink-0">
            <div className="bg-white rounded-lg shadow-md p-4 sticky top-6">
              <h3 className="font-bold text-gray-900 mb-4">教程目录</h3>
              <nav className="space-y-2">
                {sections.map((section) => {
                  const Icon = section.icon;
                  return (
                    <button
                      key={section.id}
                      onClick={() => setActiveSection(section.id)}
                      className={`w-full flex items-center space-x-3 px-3 py-2 rounded-lg text-left transition-colors ${
                        activeSection === section.id
                          ? 'bg-blue-100 text-blue-700 border border-blue-200'
                          : 'text-gray-600 hover:bg-gray-100'
                      }`}
                    >
                      <Icon className="w-4 h-4" />
                      <span className="text-sm font-medium">{section.title}</span>
                    </button>
                  );
                })}
              </nav>
            </div>
          </div>

          {/* 主内容区 */}
          <div className="flex-1">
            {renderSection()}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductDesignTutorial; 